Découvrez comment les PWA, WebAssembly et ChromeOS aident un éditeur vidéo en ligne à offrir de meilleures performances et une expérience plus attrayante à 12 millions d'utilisateurs.
97 %
Augmentation mensuelle du nombre d'installations de PWA
2,3x
Amélior. des perf.
9 %
Rétention plus élevée chez les utilisateurs de PWA
Clipchamp est un éditeur vidéo en ligne dans le navigateur qui permet à tous de raconter des histoires à partager via des vidéos. Dans le monde entier, plus de 12 millions de créateurs utilisent Clipchamp pour monter facilement des vidéos. Nous proposons des solutions simples pour créer des vidéos, allant d'outils intuitifs comme le recadrage et le découpage à des fonctionnalités pratiques comme notre enregistreur d'écran, et même un outil de création de mèmes.
Qui utilise Clipchamp ?
Nos utilisateurs (ou "éditeurs du quotidien", comme nous les appelons) sont divers. Aucune expertise n'est nécessaire pour devenir éditeur vidéo avec Clipchamp. Plus précisément, nous observons actuellement que les équipes de vente, de formation et de marketing produit utilisent notre webcam et notre enregistreur d'écran pour créer des contenus explicatifs rapides avec du texte et des GIF ajoutés pour les rendre attrayants. Nous observons également que de nombreuses petites entreprises montent et publient des vidéos sur les réseaux sociaux lorsqu'elles sont en déplacement.
À quels défis sont-ils confrontés ?
Nous sommes conscients que le montage vidéo peut sembler intimidant au premier abord. On suppose que c'est difficile, probablement en raison d'expériences frustrantes antérieures avec des logiciels de montage complexes. En revanche, Clipchamp se concentre sur la facilité et la simplicité, en proposant des superpositions de texte, des vidéos et de la musique de stock, des modèles, etc.
Nous constatons que la plupart des éditeurs ne souhaitent pas créer de chefs-d'œuvre cinématographiques. Nous échangeons beaucoup avec nos utilisateurs et nous nous rappelons constamment qu'ils sont occupés et qu'ils veulent simplement partager leur histoire avec le monde entier aussi rapidement et facilement que possible. C'est donc un point sur lequel nous nous concentrons.
Développer une PWA Clipchamp
Chez Clipchamp, nous voulons permettre à tous de raconter leurs histoires grâce à la vidéo. Pour concrétiser cette vision, nous avons rapidement compris qu'il était important de permettre à nos utilisateurs d'utiliser leurs propres images lorsqu'ils créent un projet vidéo.
Cette information a mis la pression sur l'équipe d'ingénieurs de Clipchamp pour qu'elle conçoive une technologie capable de traiter efficacement des fichiers multimédias de plusieurs gigaoctets dans une application Web. Compte tenu des contraintes de bande passante réseau, nous avons rapidement écarté une solution cloud classique. L'importation de fichiers multimédias volumineux à partir d'une connexion Internet grand public entraînerait invariablement des temps d'attente importants avant même que le montage ne puisse commencer, ce qui entraînerait une mauvaise expérience utilisateur.
Nous avons donc opté pour une solution entièrement dans le navigateur, où tout le travail de traitement vidéo est effectué localement à l'aide des ressources matérielles disponibles sur l'appareil de l'utilisateur final. Nous avons fait le pari stratégique de miser sur le navigateur Chrome et, par extension, sur la plate-forme ChromeOS pour nous aider à surmonter les défis inévitables liés à la création d'une plate-forme de création de vidéos dans le navigateur.
Le traitement vidéo est extrêmement gourmand en ressources, affectant à la fois les ressources informatiques et de stockage. Nous avons commencé à créer la première version de Clipchamp sur le Native Client (PNaCl) (Portable) de Google. Bien que PNaCl ait finalement été abandonné, il a permis à notre équipe de confirmer que les applications Web peuvent être rapides et à faible latence, tout en s'exécutant sur le matériel de l'utilisateur final.
Lorsque nous sommes passés à WebAssembly, nous avons été ravis de voir Chrome prendre la tête de l'intégration des fonctionnalités post-MVP telles que les opérations de mémoire groupées, le threading et, plus récemment, les opérations vectorielles à largeur fixe. Ce dernier a été très attendu par notre équipe d'ingénieurs, qui nous a permis d'optimiser notre pile de traitement vidéo pour tirer parti des opérations SIMD, courantes sur les processeurs actuels. En profitant de la compatibilité de Chrome avec le SIMD WebAssembly, nous avons pu accélérer certaines charges de travail particulièrement exigeantes, telles que le décodage et l'encodage vidéo 4K.
Avec peu d'expérience préalable et en moins d'un mois d'efforts pour l'un de nos ingénieurs, nous avons réussi à améliorer les performances de 2,3 fois. Bien que nous soyons toujours limités à une phase d'évaluation de l'origine Chrome, nous avons déjà pu déployer ces améliorations SIMD auprès de la majorité de nos utilisateurs. Bien que nos utilisateurs exécutent des configurations matérielles très différentes, nous avons pu confirmer une amélioration des performances en production sans constater d'effets néfastes sur les taux de défaillance.
Plus récemment, nous avons intégré l'API WebCodecs émergente, actuellement disponible dans une autre phase d'évaluation de l'origine Chrome. Grâce à cette nouvelle fonctionnalité, nous pourrons améliorer davantage les performances du décodage vidéo sur les appareils à faible spécification, comme c'est le cas sur de nombreux Chromebooks populaires.
Une fois que vous avez créé une PWA, il est important de l'encourager à l'adopter. Comme pour de nombreuses applications Web, nous nous sommes concentrés sur la facilité d'accès, y compris les connexions aux réseaux sociaux, y compris Google, qui permettent à l'utilisateur de monter rapidement des vidéos, puis de les exporter facilement. De plus, nous avons promu nos invites d'installation de PWA dans la barre d'outils et sous forme d'avis pop-up dans la navigation du menu.
Résultats
Notre PWA Chrome installable a très bien fonctionné. Nous avons été ravis de constater une fidélisation de 9% supérieure chez les utilisateurs de PWA par rapport à nos utilisateurs de bureau standards. L'installation de la PWA a été massive, augmentant à un rythme de 97% par mois depuis son lancement il y a cinq mois. Et, comme indiqué précédemment, les améliorations SIMD WebAssembly ont amélioré les performances de 2,3 fois.
Futur
Nous sommes agréablement surpris par l'engagement et l'adoption de notre PWA. Nous pensons que la rétention des utilisateurs de Clipchamp a été améliorée, car la PWA est installée et plus facile d'accès. Nous avons également constaté que la PWA fonctionne mieux pour l'éditeur, ce qui la rend plus attrayante et incite les utilisateurs à revenir.
Nous sommes impatients de voir comment ChromeOS permettra à encore plus d'utilisateurs de gagner en productivité avec moins de tracas. Plus précisément, nous sommes ravis de certaines des intégrations pratiques avec l'OS local lorsque vous travaillez avec des fichiers. Nous pensons que cela aidera à accélérer les workflows pour nos rédacteurs quotidiens, ce qui est l'une de nos priorités absolues.